<template>
  <div>
    <!-- banner区域 -->
    <div class="banner pos-rel">
      <IndexSwiper :imgs="imgs" />
      <div class="ban-link w1160 pos-abs flex just-around items-center">
        <img src="@/assets/img/index/1.png" width="76" height="70" alt="" />
        <span
          >橙券，是权益营销方案提供商，为实现品牌-市场-用户的紧密互联提供强有力的智慧支持。</span
        >
        <a href="#" class="btn-more">了解更多</a>
      </div>
    </div>
    <!-- 内容区 -->
    <div class="content">
      <!-- 1. 橙品牌区域 -->
      <div class="con-brand w1160">
        <div class="top-title m-auto"></div>
        <!-- 品牌展示 -->
        <ul class="brand-show flex tac c-fff">
          <li v-for="(brand, keyName) in branShowData" :key="keyName">
            <!-- 遮罩 -->
            <div class="show-mask pos-abs">
              <img :src="brand.imgSrc" width="90" height="90" alt="" />
              <h3>{{ brand.title }}</h3>
              <p>{{ brand.desc }}</p>
              <a href="#" class="btn-more c-fff">{{ brand.btnText }}</a>
            </div>
          </li>
        </ul>
      </div>
      <!-- 2. 科技赋能区域 -->
      <div class="con-science flex flex-column items-center">
        <div class="top-title"></div>

        <ul class="sci-case w1160 flex just-between">
          <li v-for="item in sciListData" :key="item">
            <a href="#">{{ item }}</a>
          </li>
        </ul>

        <!-- 企业轮播区域 -->
        <div class="enterprises pos-rel">
          <span class="enter-btn pos-abs"></span>
          <ul class="pos-rel">
            <li
              class="pos-abs flex flex-column items-center"
              v-for="(item, keyName) in swiperData"
              :key="keyName"
            >
              <img :src="item.imgSrc" width="218" height="55" alt="!" />
              <p class="pt58">
                {{ item.desText }}
              </p>
              <span class="border-bt pos-abs" v-if="item.bottomLine"></span>
            </li>
          </ul>
          <span class="enter-btn pos-abs"></span>
        </div>
      </div>
    </div>
    <!-- 底部banner区域 -->
    <div class="banner-bottom c-fff tac">
      <h3>依托橙券，聚焦权益，全面合作</h3>
      <p>全国服务热线：400-096-0828 | 商务合作专线：156-6806-1789</p>
      <a href="#" class="btn-more c-fff">了解更多</a>
    </div>
  </div>
</template>

<script>
import "@/assets/css/index.css";
import INDEX_DATA from "@/config/index.config";
// import IndexSwiper from './IndexSwiper.vue'

let { branShowData, sciListData, swiperData } = INDEX_DATA;

export default {
  name: "IndexPage",
  components:{
    IndexSwiper: ()=>import('./IndexSwiper.vue')
  },
  data() {
    return {
      branShowData,
      sciListData,
      swiperData,
      imgs: []
    };
  },
  methods: {
    async getBanners() {
      const res = await this.$api.getBanners();
      this.imgs = res.data;
    },
  },
  created() {
    this.getBanners()
  },
  mounted() {
    // console.log(process.env)
    this.$EventBus.$emit("IndexStatus", true)
    this.$EventBus.$emit("navActive", 'index')
  },
};
</script>

<style lang="stylus" scoped>
.banner
  background: none
</style>